<template>
  <div style="width:100%;height:100%;min-width: 350px;" :id="visite_id" class="pie"></div>
</template>

<script>
  import echarts from 'echarts';

  export default {
    name: 'dataSourcePie',
    props: ['xDataArr', 'yDataArr', 'visite_volume_id', 'xDataTitle'],
    data () {
      return {
        xDataList: [],
        yDataList: [],
        visite_id: '',
        title: '',
      };
    },
    created: function () {
      var _this = this;
      _this.xDataList = _this.xDataArr;
      _this.yDataList = _this.yDataArr;
      _this.visite_id = 'id_' + _this.visite_volume_id;
      _this.title = _this.xDataTitle;
    },
    mounted () {
      var _this = this;
      this.$nextTick(() => {
        var visite_id = _this.visite_id;
        var dataSourcePie = echarts.init(document.getElementById(visite_id));
        const option = {
          title: {
            text: _this.title,//'2017年纳税前五名的分成比例',
            x: 'center',
          },
          legend: {
            orient: 'vertical',
            x: 'right',
            y: 'center',
            data: _this.xDataList,//['济南天骄网苑', '爱网人花园网吧', '其他', '爱网人易尚', '网果网咖', '新世纪电影城洪楼店']
          },
          //backgroundColor: '#2c343c',
          tooltip: {
            trigger: 'item',
            formatter: "{a}{b} : {c} ({d}%)"
          },
          series: [
            {
              //name: '分成比例',
              type: 'pie',
              radius: '55%',
              center: ['40%', '50%'],
              data: _this.yDataList,
              /*[
               {value: 235, name: '济南天骄网苑'},
               {value: 274, name: '爱网人花园网吧'},
               {value: 600, name: '其他'},
               {value: 310, name: '爱网人易尚'},
               {value: 335, name: '网果网咖'},
               {value: 400, name: '新世纪电影城洪楼店'}
               ]*/
            }
          ]
        };
        dataSourcePie.setOption(option);
        window.addEventListener('resize', function () {
          dataSourcePie.resize();
        });
      });
    }
  };
</script>
